<template>
  <div class="team-all">
    <head-top head-title="查看全部" go-back="true"></head-top>
    <div class="list-wrapper">
      <div class="wrapper" v-for="(li,index) in teamList" :key="index">
        <mt-cell :title="li.name" :to="'/TeamDetail/'+li.id">
          <span>
            <img src="./images/zaixian@2x.png" alt="" width="36" height="36" v-show="li.status===1">
            <img src="./images/yilikai@2x.png" alt="" width="36" height="36" v-show="li.status===0">
          </span>
          <img v-show="li.head_img" class="touxiang" slot="icon" :src="li.head_img" width="40" height="40">
          <span v-show="!li.head_img" class="head-bg" slot="icon">{{li.bgName}}</span>
        </mt-cell>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '../../components/header/Header.vue'
import {getTeamAllList} from '../../api/jianli.js'
import { Indicator } from 'mint-ui'

export default {
  name: 'TeamAll',
  data() {
    return {
      teamList: []
    }
  },
  created() {
    Indicator.open({
      text: '加载中...',
      spinnerType: 'fading-circle'
    })
    this._getTeamAllList()
  },
  components: {
    headTop
  },
  methods: {
    _getTeamAllList() {
      getTeamAllList(this.$route.params.id).then(res => {
        if (res.code === 200) {
          this.teamList = res.data
          this.teamList.forEach(item => {
            this.$set(item, 'bgName', item.name.substring(item.name.length - 2))
          })
          Indicator.close()
        } else {
          setTimeout(function() {
            alert('请求超时')
            Indicator.close()
          }, 15000)
        }
      })
    }
  }
}
</script>

<style lang='scss'>
  .team-all {
    padding-top: 40px;
    background-color: #fff;
    .list-wrapper{
      .wrapper{
        margin: 0 10px;
        .head-bg {
            display: inline-block;
            text-align: center;
            line-height: 40px;
            width: 40px;
            height: 40px;
            background-color: #0078de;
            border-radius: 50%;
            color: #fff;
            font-size: 12px;
          }
        .mint-cell:last-child{
          background-size: 100% 0;
        }
        .mint-cell-wrapper{
          padding: 0;
        }
      }
    }
    .touxiang{
      border-radius: 50%;
    }
  }
</style>
